<template>
  <div class='detail'>
    <header>
      <img src="../../../static/index/left-b.png"
           alt="" @click="GoRouter">
      <span>店铺详情</span>
      <span class="header_icon" @click="handleshareProgram">
          <van-icon name="share" size="20"/>
        </span>
    </header>
    <!-- 轮播 -->
    <van-swipe :autoplay="3000"
               indicator-color="white">
      <van-swipe-item
        v-for="(item,index) in detailImgUrl"
        :key="index">
        <img :src="`${BaseUrl}${item.path}`" width="414" height="414"
             onerror="this.onerror=null;this.src='http://www.menpuwang.com/attachment/information/201908/1566036018dw19p.jpg'"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 标题 -->
    <div class='title bet'>
      <div>
        <p>{{detailList.title}}</p>
        <span>时间:{{detailList.begintime | moment}}</span>
      </div>
      <div class='ver'>
        <span v-if="CollectFlag === 0" @click="handleCollectFlag(0,'infoid','user/addCollect')">
          <img src="../../../static/index/ioc-22.png"
               alt="">
           <span>收藏</span>
        </span>
        <span v-else @click="handleCollectFlag(1,'infoids','user/removeCollect')">
          <img src="../../../static/index/ioc--22.png"
               alt="">
        <span>已收藏</span>
        </span>
      </div>
    </div>
    <!-- 店面信息 -->
    <div class='info bal'>
      <div class='ver'>
        <p>面积</p>
        <span>{{detailList.acreage}}平方</span>
      </div>
      <div class='ver'>
        <p>租金</p>
        <span v-if="detailList.rent>0">{{detailList.rent}} {{detailList.danwei}}</span>
        <span class="markRed" v-else>面议</span>
      </div>
      <div class='ver'>
        <p>转让费</p>
        <span v-if="detailList.zhuangrang>0 ">{{detailList.zhuangrang}}</span>
        <span class="markRed" v-else>面议</span>
      </div>
    </div>
    <!-- 联系方式 -->
    <div class='contact'>
      <p>来源:<span>老板本人</span></p>
      <div>
        <p>电话:<span>{{detailList.tel}}</span></p>
        <!--<p>QQ:<span>{{detailList.qq}}</span></p>-->
      </div>
    </div>

    <!--<div class="baidumap" id="allmap" v-if="mapFlag === true"></div>-->

    <!-- 详细介绍 -->
    <div class='content'>
      <p>详细描述 </p>
      <div v-html="detailList.content"></div>
    </div>
    <div style="height:300px" id="container" tabindex="0" v-if="mapFlag===true"></div>
    <!-- 底部 -->
    <footer>
      <a :href='`tel:${tel}`'>
        <img src="../../../static/index/ioc-23.png"
             alt="">
        拨打电话联系
      </a>
    </footer>
  </div>
</template>
<script>
  import {getStore} from '@/config/mUtils'
  import AMap from 'AMap'

  export default {
    name: 'detail',
    data() {
      return {
        showAbs: true,
        detailList: {},
        detailID: this.$route.params.id,
        detailLIstID: [this.$route.params.id],
        // detailInfoid: '',
        detailImgUrl: [],
        BaseUrl: this.$parent.imgUrl,
        CollectFlag: false,
        isLogin: false,
        tel: '',
        opacityStyle: {
          opacity: 0
        },
        lat: '',
        lng: '',
        mapFlag: true
      }
    },
    methods: {
      GaodeMap() {
        var map = new AMap.Map('container', {
          center: [this.lng, this.lat], // [纬度，经度]
          resizeEnable: true,
          zoom: 18,
        });

        var marker = new AMap.Marker({
          position: new AMap.LngLat(this.lng, this.lat),
          offset: new AMap.Pixel(-10, -10)
        });

        map.add(marker);

        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.Scale())
        })
      },
      initDate() {
        //详情列表
        this.$axios.post('Information/detail', this.qs.stringify({
          "token": getStore("token"),
          "id": this.detailID
        })).then((res) => {
          this.detailList = res.data.data.info
          this.detailImgUrl = res.data.data.imgs
          this.CollectFlag = res.data.data.is_collect
          this.tel = res.data.data.info.tel
          this.lat = res.data.data.info.lat
          this.lng = res.data.data.info.lng

          if (this.lat == '0.000000000' || this.lng == '0.000000000') {
            this.mapFlag = false
          } else {
            this.mapFlag = true
            this.GaodeMap()
          }
        });
      },
      //判断是否收藏
      handleCollectFlag(num, key, val) {
        this.handleLogin()
        let params = {
          "token": getStore("token"),
          key: this.detailID
        }

        num === 1 ? params[key] = this.detailLIstID : params[key] = this.detailID
        // params[key] = this.detailID
        delete params['key']
        params = this.qs.stringify(params)
        this.$axios.post(val, params).then((res) => {
          if (res.data.status === 1) {
            this.$toast.success(res.data.message)
          } else {
            // this.$toast.fail(res.data.message)
          }
          this.initDate()
        });
      },
      GoRouter() {
        this.$router.go(-1)
      },
      handleScroll() {
        const top = document.documentElement.scrollTop;
        // console.log(top);
        if (top > 10) {
          let opacity = top / 339;
          opacity = opacity > 1 ? 1 : opacity;
          this.opacityStyle = {opacity};
          this.showAbs = false
        } else {
          this.showAbs = true
        }
      },
      // 分享微信会话
      handleshareProgram() {
        let _this = this
        let detailID = this.detailID
        var wxPlus = api.require('wxPlus');
        let title = this.detailList.title
        let desc = this.detailList.brief
        let strUrl = `http://www.menpuwang.com/m/index.php?mod=information&id=${detailID}&cityid=${getStore('cityid')}`
        wxPlus.shareWebpage({
          //apiKey: '',
          scene: 'session',
          title: title,
          description: desc,
          thumb: 'widget://res/suolue.png',
          contentUrl: strUrl
        }, function (ret, err) {
          if (ret.status) {
            _this.$toast.success('分享成功')
          } else {
            _this.$toast.fail('分享失败')
          }
        });

        //http://www.menpuwang.com/information.php?id=114371
      },
      handleLogin() {
        if (!this.isLogin) {
          this.$dialog.confirm({
            title: '是否前往登录页面 ?',
          }).then(() => {
            this.$router.push({
              path: '/login'
            })
          }).catch(() => {
            // this.$toast.fail('取消登录')
          });
        }
      },
    },
    mounted() {
      // this.GaodeMap()
      window.addEventListener('scroll', this.handleScroll)
      // window.addEventListener("scroll", this.handleScroll);
    },
    created() {
      this.initDate()
      this.isLogin = !!(getStore("token") && getStore("userName") && getStore("userPsd"));
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll)
      // window.removeEventListener("scroll", this.handleScroll, true);
    }

  }
</script>
<style scoped>
  @import url("../../assets/css/detail.css");

  .content {
    min-height: 200px;
  }

  .ver {
    text-align: center;
  }

  .info span {
    color: red;
  }

  /*.markRed {*/
  /*color:#333 !important;*/
  /*}*/

  .ver span span {
    display: block;
  }

  .van-swipe {
    /*margin-top: 45px;*/
  }

  .baidumap {
    width: 100%;
    height: 500px;
    /*border: 1px solid red;*/
    position: absolute;
    margin: auto;
    margin-bottom: 20px;
  }

  .header_icon {
    position: absolute;
    right: 20px;
    top: 25px;
  }
</style>
